<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快报管理</title>
    <style>
        .express_left{
            width: 50%;
            float: left;
            height: 100000px;
        }
        .express_right{
            width: 50%;
            float: left;
            height: 100000px;
        }
    </style>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/layer.js"></script>

    <!--    添加vue和axios支持-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div class="express_left" id="subscriber">
    <div class="page-header">
        <h2>订阅人</h2>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row">
<!--        <div class="col-xs-6 col-sm-4">-->
<!--            <a class="btn btn-primary" href="javascript:void(0);" onclick="addNews()">-->
<!--                <span class="glyphicon glyphicon-plus"></span>-->
<!--                新增-->
<!--            </a>-->
<!--            <a class="btn btn-danger"  href="javascript:void(0);" onclick="deleteNews()" >-->
<!--                <span class="glyphicon glyphicon-trash"></span>删除-->
<!--            </a>-->
<!--        </div>-->
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-11">
            <div class="table-responsive " style="vertical-align: middle;text-align: center;">
                <table id="searchTable" class="table table-bordered table-condensed ">
                    <tr>
                        <td><input  type="checkbox" id="all"  name="all" value="全选" onclick="selectOrDecAll(this)"/> 全选</td>
                        <td>ID</td>
                        <td>邮件地址</td>
                    </tr>
                    <tr v-for="subscriber in subscribers">
                        <td><input type='checkbox'  :name="subscriber.id" /></td>
                        <td>{{subscriber.id}}</td>
                        <td>{{subscriber.mailSubscriberAddr}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="express_right" id="records">

    <div class="page-header">
        <h2>邮件发送记录</h2>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row">
<!--        <div class="col-xs-6 col-sm-4">-->
<!--            <a class="btn btn-primary" href="javascript:void(0);" onclick="addNews()">-->
<!--                <span class="glyphicon glyphicon-plus"></span>-->
<!--                新增-->
<!--            </a>-->
<!--            <a class="btn btn-danger"  href="javascript:void(0);" onclick="deleteNews()" >-->
<!--                <span class="glyphicon glyphicon-trash"></span>删除-->
<!--            </a>-->
<!--        </div>-->
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-11">
            <div class="table-responsive " style="vertical-align: middle;text-align: center;">
                <table id="table" class="table table-bordered table-condensed ">
                    <tr>
                        <td><input  type="checkbox" id=""  name="all" value="全选" onclick="selectOrDecAll(this)"/> 全选</td>
                        <td>ID</td>
                        <td>新闻</td>
                        <td>发送时间</td>
                        <td>邮件地址</td>
                    </tr>
                    <tr v-for="record in records">
                        <td><input type='checkbox'  :name="record.id" /></td>
                        <td>{{record.id}}</td>
                        <td><a  target="_blank" :href="record.news.newsHref"><span>链接</span></a></td>
                        <td>{{formate(record.sendTime)}}</td>
                        <td>{{record.mailAddr}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    let subscriberVue = new Vue({
        el:'#subscriber',
        data:{
            subscribers:""
        },
        methods:{
            formate: function (date) {
                var date = new Date(date);
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                var day = date.getDate();
                return year+"-"+month+"-"+day;
            }
        }
    });
    let recordsVue = new Vue({
        el:'#records',
        data:{
            records:""
        },
        methods:{
            formate: function (date) {
                var date = new Date(date);
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                var day = date.getDate();
                var hour = date.getHours();
                // var hour = new Date().getHours();
                var min = date.getMinutes();
                var sec = date.getSeconds();
                return year+"-"+month+"-"+day+" "+hour+":"+min+":"+sec;
            }
        }
    });
    function getSubscribers() {
        Vue.http.post('getSubscriber')
            .then((res) => {
                subscriberVue.subscribers = res.data.data;
            },(error)=>{
                console.log(error);
            });
    }

    function getMailRecords(){
        Vue.http.post('getMailSendRecords')
            .then((res) => {
                recordsVue.records = res.data.data;
            },(error)=>{
                console.log(error);
            });
    }




    $(document).ready(function () {
        getSubscribers();
        getMailRecords();
    });
</script>

</html>